<template>
  <div v-if="loading" style="opacity: 0">
    加载
  </div>
  <div class="body-box" v-else-if="path != '/login'">
    <!---->
    <navList></navList>
    <div class="main-box">
      <comHead></comHead>
      <div class="router-box">
        <router-view/>
      </div>
      <a href="https://beian.miit.gov.cn/" class="ba-box">备案号：粤ICP备2025361655号-2号</a>
    </div>
  </div>
  <div v-else>
    <router-view/>
  </div>

  <div class="service-box" v-if="showService">
    <img src="./assets/images/service.png" alt="" @click="isOpen = true">
    <div class="service-con" :class="{'isOpen': isOpen}">
      <img :src="service_img" alt="客服">
      <div style="font-size: 14px; margin-top: 5px;">扫码添加</div>
      <div>随时需要，随时咨询</div>
      <div class="close-btn" @click="isOpen = false">
        <el-icon color="#999">
          <Close />
        </el-icon>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {useRoute} from "vue-router";
import navList from "@/components/navList.vue";
import comHead from "@/components/comHead/index.vue";
import Https from "@/server";

const Route = useRoute();
const path = ref("def");
const service_img = ref("");
const isOpen = ref(false);
const loading = ref(true);
const showService = ref(false);

const getWebConfig = () => {
  Https.getWebConfig({}).then((res:any) => {
    if(res.code == 0){
      service_img.value = res.data.mall.setting.wx_service_pic;
    }

  })
}
const excludePaths = ['/cart', '/login'];
onMounted(()=>{

  let clear = setTimeout(() => {
    loading.value = false;
    path.value = Route.path;
    if(!excludePaths.includes(path.value)) {
      showService.value = true;
    }
    clearTimeout(clear)
  },200)
  getWebConfig();
})

watch(
    () => Route.path,
    (newPath) => {
      showService.value = !excludePaths.includes(newPath);
    }
)

</script>
<style lang="scss">

.body-box {
  width: 100%;
  height: 100vh;
  display: flex;
}

.main-box{
  width: 100%;
  height: 100vh;

}

.router-box{
  height: calc(100% - 90px);
  overflow-y: auto;
}


.ba-box{
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  font-size: 12px;
  color: #3d4955;
}

.service-box{
  width: 62px;
  height: 62px;
  position: fixed;
  bottom: 10%;
  right: 60px;
  z-index: 999;
  cursor: pointer;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, .25);
  justify-content: center;
  align-items: center;
  display: flex;

  >img{
    width: 70%;
  }

  .service-con{
    font-size: 12px;
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) scale(0);
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, .25);
    cursor: auto;
    opacity: 0;
    z-index: -1;
    transition: opacity, transform 1.5s;
    text-align: center;

    img{
      width: 110px;
      height: 110px;
    }
  }

  .service-con.isOpen{
    opacity: 1;
    z-index: 1;
    transform: translate(50%, 50%) scale(1);
  }

  .close-btn{
    position: absolute;
    top: -5px;
    right: -5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, .25);
    background: #fff;
    cursor: pointer;
  }

}
</style>

